<template>
	<view class="index">
		<view class="topEaBg"></view>
		<view class="margin" style="border-radius: 20rpx; overflow: hidden;">
			<swiper style="height: 250rpx; " class="bg-white screen-swiper square-dot" :indicator-dots="true"
				:circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(v,index) in bannerList" :key="index" @click="openClick(v.redirectUrl)">
					<img style="width: 100%; height: 100%;"
						:src="v.imgPath ? v.imgPath : require('../../static/logo.png')"></img>
				</swiper-item>
			</swiper>
		</view>

		<view class="marquee bg-white padding-sm">
			<view class="marquee-content">
				<text class="cuIcon-sound margin-right-sm">公告：</text>
				{{notice}}
			</view>
		</view>

		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-xl text-bold">今日完整观看次数：{{viewInfo.seeTotalNum || 0}}</text>
			</view>
		</view>

		<view class="bg-white padding flex justify-between text-center" style="border-radius: 10rpx;">
			<!-- <view class="bg-white myRadius text-center">
				<view class="cu-list grid" :class="['col-2',gridBorder?'':'no-border']">
					<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<2*2">
						<view>
							<image class="myImage" :src="item.img"></image>
						</view>
						<text class="text-bold">{{item.name}}</text>
					</view>
				</view>
			</view> -->

			<view @click="goto('/pages/index/signin/index')">
				<view>
					<image class="myImage" src="../../static/lsq/sign.png"></image>
				</view>
				<view>每日签到</view>
			</view>
			<view @click="goto('/pages/index/lottery/index')">
				<view>
					<image class="myImage" src="../../static/lsq/金刚区-09.png"></image>
				</view>
				<view>普通抽奖</view>
			</view>
			<view @click="goto('/pages/index/bigTurntable/index')">
			<!-- <view @click="waitClick()"> -->
				<view>
					<image class="myImage" src="../../static/lsq/zp.png"></image>
				</view>
				<view>大转盘</view>
			</view>
			<!-- <view @click="goto('/pages/index/bigLottery/index')"> -->
			<view @click="waitClick()">
				<view>
					<image class="myImage" src="../../static/lsq/cjdj.png"></image>
				</view>
				<view>超级大奖</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="fr padding-sm bg-white" @click="modalName = ''">取消</view>
				<view class="padding-xl bg-white ">
					<view class="centerLayout padding-top">
						<!-- <button class="btnLogin block bg-gradual-orange round" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					                本机号码一键登录
					            </button> -->
						<button class="block bg-gradual-orange round" @click="getPhoneNumber">一键登录</button>
					</view>
					<view class="agreementLayout padding-top-sm">
						<u-checkbox-group v-model="checked" placement="column" @change="onCheckboxChange">
							<u-checkbox size="30rpx" activeColor="#ff1b1b" :name="true">
							</u-checkbox>
						</u-checkbox-group>
						<view class="agreementTxt">
							<radio class="margin-right-sm" @click="radio = !radio" style="align-self: center;"
								:class="radio?'checked':''" :checked="radio" value="A"></radio>
							我已阅读并同意乐淘生活
							<text style="color: #F72124;font-weight: bold"
								@click="goto('/pages/index/user/agreement')">用户协议
							</text>
							和
							<text style="color: #F72124;font-weight: bold"
								@click="goto('/pages/index/user/private')">隐私政策
							</text>
							并使用本机号码登录
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal1'?'show':''">
			<view class="cu-dialog">
				<view class="fr padding-sm bg-white" @click="modalName = ''">取消</view>
				<view class="padding-xl bg-white ">
					<view class="centerLayout padding-top">
						<!-- <button class="btnLogin block bg-gradual-orange round" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					                本机号码一键登录
					            </button> -->
						<view class="wraper">
							<button style="width: 100rpx; height: 100rpx; padding: 0;" class="avatar-wrapper"
								open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image v-if="avatarUrl" class="avatar" :src="avatarUrl"
									style="width: 100rpx; height: 100rpx; padding: 0;"></image>
								<text class="text-xs" v-else>获取头像</text>
							</button>
							<input type="nickname" class="weui-input margin-tb-sm" placeholder="请输入昵称"
								@change="getNickname" />
							<!-- <button class="avatar-wrapper block bg-gradual-orange round" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
											授权头像昵称
										</button> -->
							<!-- <view class="button">
											<u-button customStyle="width: 40%;color:#07c160;border-color: #efefef;" @click="close">取消</u-button>
											<u-button customStyle="width: 40%;background-color:#07c160;color:#fff" @click="getupdate">立即修改</u-button>
										</view> -->
							<u-toast ref="uToast"></u-toast>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import login from "../../api/new/login.js"
	import loginApi from "../../api/new/login.js"
	import indexApi from "../../api/new/indexApi.js"
	import config from "../../config.js"
	export default {
		data() {
			return {
				sjyqm: "",
				avatarUrl: "",
				radio: false,
				modalName: null,
				viewTotal: 0,
				notice: "",
				viewInfo: {
					delay: 180, // 间隔时间
					lastSeeTime: "", // 上次看广时间
					limitNum: "", // 限制次数
					seeTotalNum: "" // 今日已观看次数
				},
				bannerList: [{
						imgPath: config.url + "/wx/newVer/index/banner1.png"
					},
					{
						imgPath: config.url + "/wx/newVer/index/banner1.png"
					},
				],
				cuIconList: [{
						name: '每日签到',
						img: config.url + "/wx/zcb/25.png"
					},
					{
						name: '大转盘',
						img: config.url + "/wx/zcb/26.png"
					},
					{
						name: '普通抽奖',
						img: config.url + "/wx/zcb/27.png"
					},
					{
						name: '超级大奖',
						img: config.url + "/wx/zcb/28.png"
					},
				]
			}
		},
		onLoad(option) {
			console.log("option", option)
			this.sjyqm = option.scene
			// this.onLogin()
			this.getWxInfo()
		},
		onShow() {
			this.selectTodayToal()
			this.selectPrizeLast()
			this.getNotice()
		},
		methods: {
			init() {
				this.getBannerList()
			},
			// 获取公告
			getNotice() {
				indexApi.getNotice().then(res => {
					console.log("res", res)
					this.notice = res.rows[0].noticeTitle
				})
			},
			selectTodayToal() {
				indexApi.selectTodayToal().then(res => {
					this.viewInfo = res
				})
			},
			selectPrizeLast() {
				indexApi.selectPrizeLast().then(res => {

				})
			},
			openClick(url) {
				uni.navigateTo({
					url: url
				})
			},
			waitClick() {
				uni.showModal({
					title:"开发中",
					content:"敬请期待",
					showCancel: false,
					confirmText: "确定"
				})
			},
			//微信获取手机号信息
			getPhoneNumber(datas) {
				// if (!this.avatarUrl) {
				// 	uni.showToast({
				// 		title: "请先获取头像",
				// 		icon: "none"
				// 	})
				// 	return
				// }
				// if (!this.nickname) {
				// 	uni.showToast({
				// 		title: "请先获取昵称",
				// 		icon: "none"
				// 	})
				// 	return
				// }
				if (!this.radio) {
					uni.showToast({
						title: "请先阅读并同意用户协议",
						icon: "none"
					})
					return
				}
				console.log("============1", datas) //微信小程序返回的相关数据
				this.uniLogin(datas)
			},

			uniLogin(datas) {
				uni.login({
					provider: 'weixin',
					success: res => {
						const code1 = res.code
						let params = {
							code: code1,
							// avatarUrl: this.avatarUrl,
							// nickname: this.avatarUrl,
							// pcode: datas.detail.code,
							sjyqm: this.sjyqm
						}
						console.log("========", params)
						//一键登录
						loginApi.wxLogin(params).then(res => {
							console.log("resresres", res)
							uni.setStorageSync("token", res.token)
							// this.userLogin(res.code, res.phoneNumber)
							if (res.hasAvatar) {
								this.modalName = ""
							} else {
								this.modalName = "bottomModal1"
							}
							this.getWxInfo()
						}).catch((err) => {
							console.log("wxGetPhoneNumber err = ", err)
						})
					}
				});
			},
			getWxInfo() {
				loginApi.getWxInfo().then(res => {
					console.log("wxinfo", res)
					if (res.user.openid) {
						uni.setStorageSync("userInfo", res.user)
						this.userInfo = res.user
						// uni.showToast({
						// 	title: "登录成功"
						// })
					} else {
						this.modalName = "bottomModal"
					}
				}).catch(e => {
					this.modalName = "bottomModal"
				})
			},
			getNickname(e) {
				this.nickname = e. detail.value;
				if (this.nickname && this.avatarUrl) {
					this.updateUserInfo()
				}
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
				if (this.nickname && this.avatarUrl) {
					this.updateUserInfo()
				}
				console.log("avatarUrl", this.avatarUrl)
			},
			updateUserInfo() {
				login.updateNickName({
					"avatarUrl": this.avatarUrl,
					"nickname": this.nickname
				}).then(res => {
					this.modalName = ""
					this.getWxInfo()
				})
			}

			//一键号码登录
			// userLogin(sCode,phoneNumber) {
			//     let params = {
			//         code: sCode,
			//         phoneNumber: phoneNumber
			//     }

			//     //后台登录
			//     loginApi.wxLogin(params).then(res => {
			//         uni.setStorageSync('token', res.data.accessToken)
			//         uni.setStorageSync('activityShowType', true)
			//         setTimeout(() => {
			//             SwcTo('/pages/Home/home')
			//         }, 200)
			//     }).catch((err) => {
			//         console.log("wxPhoneNumberLogin err = ", err)
			//     })
			// }
		}
	}
</script>

<style lang="scss">
	.index {
		position: relative;

		.marquee {
			overflow: hidden;
			white-space: nowrap;
			position: relative;
			height: 40px;
			border-radius: 10rpx;
		}

		.marquee-content {
			display: inline-block;
			position: absolute;
			animation: marquee 10s linear infinite;
			color: red;
			z-index: 9;
		}

		.clone {
			animation-play-state: paused;
		}

		@keyframes marquee {
			0% {
				transform: translateX(100%);
			}

			50% {
				transform: translateX(0%);
			}

			100% {
				transform: translateX(-100%);
			}
		}

		.topEaBg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 300rpx;
			background-image: url(@/static/newVer/my/bg.png);
			background-size: 100% 100%;
			transform: scaleY(1.5);
			z-index: -1;
		}

		.myImage {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>
